/* 更深的主题变量 */
:root{
  --bg: #eef0f4;
  --card: #ffffff;
  --text: #0f172a;         /* 深色文字 */
  --muted: #374151;        /* 次级文字也更深 */
  --primary: #1d4ed8;      /* 更深的蓝 */
  --primary-weak: rgba(29,78,216,.15);
  --border: #c7ccd6;       /* 更深的边框 */
  --radius: 12px;
  --shadow: 0 10px 28px rgba(0,0,0,.10);
}

/* 卡片和按钮更有力量感 */
.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.btn{
  background: var(--primary);
  color:#fff;
}
.btn:hover{ filter: brightness(1.08); }

/* 表格更高对比 */
#msg-table{
  width:100%;
  border-collapse: collapse;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background:#fff;
}

/* 深色表头 + 白字 */
#msg-table thead th{
  background: #0f172a;     /* 深灰蓝 */
  color:#fff;
  padding: 12px 14px;
  font-weight: 700;
  border-bottom: 1px solid #0b1222;
}

/* 行边界更明显，斑马纹更深一点 */
#msg-table tbody td{
  padding:12px 14px;
  border-top:1px solid var(--border);
  color: var(--text);
}
#msg-table tbody tr:nth-child(odd){ background:#f5f6f9; }
#msg-table tbody tr:hover{ background:#e7ecff; }  /* 悬停高亮更明显 */

/* 标签与时间 */
.name{ font-weight: 800; color:#111827; }
.time{ color:#4b5563; font-weight: 600; }

/* 小屏：卡片化时也保持对比度 */
@media (max-width: 640px){
  #msg-table thead{ display:none; }
  #msg-table, #msg-table tbody, #msg-table tr, #msg-table td{ display:block; width:100%; }
  #msg-table tbody tr{
    margin-bottom:12px; background:#fff;
    border:1px solid var(--border);
    border-radius:10px; overflow:hidden;
  }
  #msg-table tbody td{ border-top:0; padding:10px 12px; }
  #msg-table tbody td::before{
    content: attr(data-label);
    display:block; font-size:12px; color:#374151; font-weight:700; margin-bottom:4px;
  }
}